<template>
    <div>
       <!-- tab栏 -->
      	 <div class="head">
  	        <image :src="src1" class="headd" resize="cover" @click="back()"></image>
  	        <text class="head1">更改密码</text>
      	 </div>
	       <div class="id_info">
            <text class='info_name'>旧密码:</text>
            <input type="text" placeholder="请输入旧密码" class="id_inp" />
         </div>
         <div class="id_info">
            <text class='info_name'>新密码:</text>
            <input type="text" placeholder="请输入新密码" class="id_inp" />
         </div>
         <text class="tip">小贴士:密码组成包括6-12个字符,包括字母和数字</text>
         <text class="button" :class="bu1">确认变更</text>
          <!-- 密码为空或格式错误 -->
        <div class="wrap" v-if="show012">
            <div class="wqqq" v-if="show012"></div>
            <div class="wrap-1">
              <div class="wrap-2">
                <text class="wrap-3">旧密码不能为空,请重新输入</text>
                <div class="wrap-4">
                  <text class="zhaohui11">确定</text>
                </div>
              </div>
            </div>
         </div> 
           <!-- 旧密码为空或格式错误 -->
        <div class="wrap" v-if="show013">
            <div class="wqqq" v-if="show013"></div>
            <div class="wrap-1">
              <div class="wrap-2">
                <text class="wrap-3">旧密码不正确,请重新输入</text>
                <div class="wrap-4">
                  <text class="zhaohui11">确定</text>
                </div>
              </div>
            </div>
         </div> 
           <!-- 新密码为空或格式错误 -->
        <div class="wrap" v-if="show014">
            <div class="wqqq" v-if="show014"></div>
            <div class="wrap-1">
              <div class="wrap-2">
                <text class="wrap-3">新密码格式不正确,请重新输入</text>
                <div class="wrap-4">
                  <text class="zhaohui11">确定</text>
                </div>
              </div>
            </div>
         </div> 
    </div>
</template>
<style scoped>
  .head{
      width: 100%;
      height: 48px;
      padding-top: 12px;
      box-sizing: border-box;
      line-height: 32px;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      box-shadow: 1px 1px 1px #ccc;
      background-color: #fff;
      margin-bottom: 16px;
    }
    .headd{
      width: 15px;
      height: 20px;
      position: absolute;
      left: 12px;
    }
    .head1{
      font-size: 20px;
      font-weight: bold;
      color: #33c179;
    }
    .id_info{
    	width: 100%;
    	height: 14px;
    	flex-direction: row;
    	margin-top: 32px;
    	margin-bottom: 20px;
    }
    .id_inp{
    	height: 14px;
    	outline: none;
    	line-height: 14px;
    	font-size: 14px;
    	margin-left: 43px;
      /*border-bottom: solid 1px #999;*/
      /*text-align: center;*/
    }
    .info_name{
    	height: 14px;
    	line-height: 14px;
    	font-size: 14px;
    	color: #333;
    	margin-left: 23px;
    }
    .list{
    	width: 100%;
    	height: 50px;
    	flex-direction: row;
    	align-items: center;
    	/*margin-top: 20px;*/
    	border-top: solid 1px #dedcdc;
    	border-bottom: solid 1px #dedcdc;
    	position: relative;
    }
    .list_img{
    	width: 15px;
    	height: 20px;
    	margin-left: 23px;
    }
    .list1_img{
    	width: 17px;
    	height: 17px;
    	position: absolute;
    	top: 19px;
    	right: 25px;
    }
    .list_text{
    	height: 17px;
    	font-size: 14px;
    	color: #666;
    	margin-left: 17px;
    	/*line-height: 50px;*/
    }
    .tip{
      height: 12px;
      line-height: 12px;
      font-weight: bold;
      margin-left: auto;
      margin-right: auto;
      color: #33c179;
      font-size: 12px;
      margin-top: 20px;
    }
    .button{
      height: 31px;
      width: 119px;
      line-height: 31px;
      text-align: center;
      background-color: #999;
      font-size: 14px;
      font-weight: bold;
      margin-left: auto;
      margin-right: auto;
      margin-top: 54px;
      color: #fff;
      border-radius: 25px;
    }
    .bu1{
      background-color: #33c179;
    }
    .wrap{
      width: 100%;
      height: 100%;
      position: fixed;
      /*background-color: #000;*/
      z-index: 9999;
      justify-content: center;
      align-items: center;
      opacity: 1;
    }
    .www123{
      color: #33c179;
    }
    .wqqq{
      width: 100%;
      height: 100%;
      position: fixed;
      background-color: #000;
      z-index: 299;
      opacity: .9;
      justify-content: center;
      align-items: center;
    }
    .wrap-1{
      width: 237px;
      height: 168px;
      border-radius: 10px;
      /*background-image: url(http://192.168.2.123:8080/img/dialog_one.png);*/
      background-size: 237px 168px;
      opacity: 1;
      box-sizing: border-box;
      padding-top: 28px;
      z-index: 300;
      background-color: #fff;
    }
    .wrap-2{
      width: 200px;
      height: 100px;
      justify-content: center;
      align-items: center;
      margin-left: 23px;
      opacity: 1;
      /*flex-direction: row;*/  
    }
    .wrap-3{
      justify-content: center;
      align-items: center;
      font-size: 14px;
      opacity: 1;
      flex-direction: row;
    }
    .wrap-4{
      flex-direction: row;
      width: 220px;
      height: 31px;
      margin-top: 24px;
      justify-content: space-around;
      /*background-color: pink;*/
      align-items: center;
      opacity: 1;
    }
    .zhaohui11,.duanxin11{
      width: 83px;
      height: 31px;
      border-radius: 25px;
      background-color: #33c179;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 16px;
      text-align: center;
      line-height: 31px;
      opacity: 1;
    }
</style>
<script>
  export default {
    data () {
        return {
            src1: 'http://192.168.2.123:8080/img/index_back.png',//返回
           	src2: 'http://192.168.2.123:8080/img/accountmanagement_phone.png', //变更手机号图标
           	src3: 'http://192.168.2.123:8080/img/accountmanagement_password.png', //修改密码图标
           	src4: 'http://192.168.2.123:8080/img/ABOUT_return.png',//前进按钮
            bu1: '',
            show012: false,//密码不正确
            show013: false,
            show014: false,
        }
    },
    components: {
       
    },
    created () {
        
    },
    methods: {
      // 点击返回
      back(){
        this.$router.back(-1);
      },
      // 点击变更手机号图标
      changephone(){
      	this.$router.push('/');
      }
    }
}
</script>